package com.lyf.viewapp.chart;

import android.graphics.Color;
import android.graphics.Typeface;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

import com.lyf.viewapp.R;

import java.util.ArrayList;
import java.util.List;

import butterknife.BindView;
import butterknife.ButterKnife;
import lecho.lib.hellocharts.listener.LineChartOnValueSelectListener;
import lecho.lib.hellocharts.model.Axis;
import lecho.lib.hellocharts.model.AxisValue;
import lecho.lib.hellocharts.model.Line;
import lecho.lib.hellocharts.model.LineChartData;
import lecho.lib.hellocharts.model.PointValue;
import lecho.lib.hellocharts.model.ValueShape;
import lecho.lib.hellocharts.view.LineChartView;

/**
 * 线性图
 * @author lyf
 */
public class LineChartActivity extends AppCompatActivity {

    @BindView(R.id.lineChart)
    LineChartView lineChart;

    /**
     *  点的集合，顾名思义一个point，就有他所对应的x y值，假如有个点的值是（5,100）x=5 y=100
     */
    private List<PointValue> values = new ArrayList<>();

    /**
     * 定义X轴刻度值的数据集合
     * 横坐标集合，可以设置标注名称，就是x轴的值集合，可以是0-100，也可以是10000-20000
     */
    List<AxisValue> axisValuesX = new ArrayList<>();
    /**
     * 定义Y轴刻度值的数据集合
     */
    List<AxisValue> axisValuesY = new ArrayList<>();
    /**
     * 标签信息
     */
    private List<String> titleData = new ArrayList<>();
    private List<Integer> counts = new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_line_chart);
        ButterKnife.bind(this);

        titleData.add("上班");
        titleData.add("上班越界");
        titleData.add("上班离线");
        titleData.add("下班");

        counts.add(2);
        counts.add(4);
        counts.add(10);
        counts.add(3);

        setLineChartData();
    }


    /**
     * 获取数据
     */
    private void setLineChartData() {

        // Y轴属性
        Axis axisY = new Axis().setHasLines(true);
        // X轴属性
        Axis axisX = new Axis();
        //设置Y轴显示名称
        axisY.setName("状态");
        //设置X轴显示名称
        axisX.setName("人数");

        //循环为节点、X、Y轴添加数据
        for (int j = 0; j < titleData.size(); j++) {
            // 添加节点数据
            values.add(new PointValue(j, counts.get(j)));
            // 添加Y轴显示的刻度值
            axisValuesY.add(new AxisValue(j).setValue(j).setValue(j * 3));
            // 添加X轴显示的刻度值
            axisValuesX.add(new AxisValue(j).setValue(j).setLabel(titleData.get(j)));
        }

        //为X轴显示的刻度值设置数据集合
        axisX.setValues(axisValuesX);
        //为Y轴显示的刻度值设置数据集合
        axisY.setValues(axisValuesY);
        // 设置X轴轴线颜色
        axisX.setLineColor(Color.RED);
        // 设置轴线和文字间距
        axisX.setMaxLabelChars(5);
        axisY.setMaxLabelChars(5);
        // 设置Y轴轴线颜色
        axisY.setLineColor(Color.parseColor("#B48FF9"));
        // 设置X轴文字颜色
        axisX.setTextColor(Color.RED);
        // 设置Y轴文字颜色
        axisY.setTextColor(Color.parseColor("#B48FF9"));
        // 设置X轴文字大小
        axisX.setTextSize(14);
        // 设置文字样式，此处为默认
        axisX.setTypeface(Typeface.DEFAULT);
        // 设置X轴文字向左旋转45度
        axisX.setHasTiltedLabels(true);
        // 是否显示X轴网格线
        axisX.setHasLines(false);
        // 是否显示Y轴网格线
        axisY.setHasLines(false);
        // 设置是否有分割线
        axisX.setHasSeparationLine(false);
        // 设置X轴文字是否在X轴内部
        axisX.setInside(false);

        // 设置折线Line的属性：定义线的集合 add多个line就会显示对条线
        List<Line> lines = new ArrayList<>();
        //将值设置给折线
        Line line = new Line(values);
        // 设置折线颜色
        line.setColor(Color.parseColor("#FAE136"));
        // 设置折线宽度
        line.setStrokeWidth(3);
        // 设置折线覆盖区域是否填充
        line.setFilled(false);
        // 是否设置为立体的(平滑)
        line.setCubic(false);
        // 设置节点颜色
        line.setPointColor(Color.parseColor("#F38071"));
        // 设置节点半径
        line.setPointRadius(5);
        // 是否显示节点数据
        line.setHasLabels(true);
        // 是否显示折线
        line.setHasLines(true);
        // 是否显示节点
        line.setHasPoints(true);
        // 节点图形样式 DIAMOND 菱形、SQUARE 方形、CIRCLE 圆形
        line.setShape(ValueShape.CIRCLE);
        // 隐藏数据，触摸可以显示
        line.setHasLabelsOnlyForSelected(false);
        // 是否垂线水平线连接
        line.setSquare(false);
        // 将数据集合添加线
        lines.add(line);

        // 将线的集合设置为折线图的数据 线上的数据，鸡肋但必须得用
        LineChartData mLineChartData = new LineChartData(lines);
        // 将Y轴属性设置到左边
        mLineChartData.setAxisYLeft(axisY);
        // 将X轴属性设置到底部
        mLineChartData.setAxisXBottom(axisX);
        //设置右边显示的轴
        mLineChartData.setAxisYRight(null);
        //设置顶部显示的轴
        mLineChartData.setAxisXTop(null);
        // 设置反向覆盖区域颜色
        mLineChartData.setBaseValue(Color.GREEN);
        // 设置数据背景是否跟随节点颜色
        mLineChartData.setValueLabelBackgroundAuto(true);
        // 设置数据背景颜色
        mLineChartData.setValueLabelBackgroundColor(Color.BLUE);
        // 设置是否有数据背景
        mLineChartData.setValueLabelBackgroundEnabled(false);
        // 设置数据文字颜色
        mLineChartData.setValueLabelsTextColor(Color.BLACK);
        // 设置数据文字大小
        mLineChartData.setValueLabelTextSize(15);
        // 设置数据文字样式
        mLineChartData.setValueLabelTypeface(Typeface.MONOSPACE);

        //将参数设置到控件上
        lineChart.setLineChartData(mLineChartData);
        //设置图表数据是否选中进行显示 true：点击选中模块变大  false：只有手指按住模板时才变大，手指离开恢复原状
        lineChart.setValueSelectionEnabled(false);
        //设置透明度
        lineChart.setAlpha(0.9f);
        //设置是否支持缩放
        lineChart.setZoomEnabled(true);
        //设置图表是否可以与用户互动
        lineChart.setInteractive(true);
        //设置图表数据是否选中进行显示
        //点击事件
        lineChart.setOnValueTouchListener(selectListener);
    }


    /**
     * 监听事件
     */
    private LineChartOnValueSelectListener selectListener = new LineChartOnValueSelectListener() {

        @Override
        public void onValueSelected(int lineIndex, int pointIndex, PointValue value) {

        }

        @Override
        public void onValueDeselected() {
        }
    };
}
